<template>
  <el-dialog
    title="角色关联权限"
    :visible.sync="showDialog"
    width="40%"
    @close=""
  >
    <!-- 绘制树 -->
    <!-- check-strictly  在显示复选框的情况下，是否遵循父子不互相关联的做法 -->
    <!-- 默认为FALSE，表示 默认关联了，所以父只要打了钩，子就要打钩-->
    <!-- 如果为true，标识不关联，父是父，子是子，各自打钩互不影响 -->
    <!-- 树形组件，并不是双向绑定的！我们要通过方法来获取勾选的或者半钩的数据 -->
    <el-tree
      ref="tree"
      :data="permissionAllList"
      :check-strictly="true"
      default-expand-all
      :props="{
        label: 'name',
        children: 'child',
      }"
      show-checkbox
      node-key="id"
      :default-checked-keys="permIds"
    ></el-tree>
    <span slot="footer">
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="btnOK">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getPermissionList } from "@/api/permission";
import { tranListToTreeData } from "@/utils";
import { setRoleAuth } from "@/api/setting";
export default {
  name: "",
  data() {
    return {
      showDialog: false,
      permissionAllList: [], // 所有权限
      permIds: [], // 角色已经有的权限
      roleId: null, // 角色ID
    };
  },
  methods: {
    // 获取所有权限
    async getPermissionList() {
      let res = await getPermissionList();
      this.permissionAllList = tranListToTreeData(res, "0");
    },
    closeDialog() {
      this.permIds = [];
    },
    async btnOK() {
      //得到对钩的数据
      const checkKeys = this.$refs.tree.getCheckedKeys();
      await setRoleAuth({
        id: this.roleId,
        permIds: checkKeys,
      });
      //   提示成功
      this.$message.success("关联权限成功");
      //   关闭
      this.showDialog = false;
    },
  },
};
</script>
<style scoped></style>
